<template>
  <div>
    <a-drawer title="栏目权限" :width="860" :visible="visible" @close="onClose">
      <secondary-title>基础信息</secondary-title>
      <a-form-model
        :model="roleForm"
        ref="roleForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row class="form-row">
          <a-col :span="8">
            <a-form-model-item label="身份名称" prop="name">
              {{ roleForm.name }}
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="备注信息">
              {{ roleForm.remark }}
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <secondary-title>权限设置</secondary-title>
      <transition name="fade">
        <div class="qiankun-alertTitle" v-show="isAlertTitle">
          <div>
            <a-icon type="exclamation-circle" theme="filled" />
            请谨慎分配标记【*】的功能权限，随意分配这些权限可能会给您带来潜在风险。
          </div>
          <a-icon @click="isAlertTitle = false" type="close" />
        </div>
      </transition>
      <!-- 权限设置 -->
      <a-card class="qiankun-permission-tree">
        <permission-tree
          v-loading="isLoading"
          ref="tree"
          :treeData="treeData"
          :pageType="type"
        ></permission-tree>
      </a-card>
      <a-row class="mt30" type="flex" justify="end">
        <a-button class="mr20" @click="onClose">取消</a-button>
        <a-button v-show="!isDetail" style="margin-left:10px;" type="primary" @click="onSave"
          >保存</a-button
        >
      </a-row>
    </a-drawer>
  </div>
</template>
<script>
import permissionTree from "./permissionTree.vue";
import { PLACEHOLDER_INPUT, TITLE_OBJECT } from "@/config/const";
import { SecondaryTitle } from "@/components/common";
import { changePlaceholder } from "@/utils/util";
import { mapGetters } from "vuex";

import {
  getRoleTree,
  getDetailTreeList,
  addRoleTreeInfo
} from "@/services/roleManage.js";
const originForm = {
  id: undefined,
  name: "",
  remark: "",
  departmentId: "",
  enterpriseId: ""
};
export default {
  name: "permissionDrawer",
  props: {
    showCheckbox: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      changePlaceholder,
      PLACEHOLDER_INPUT,
      TITLE_OBJECT,
      visible: false,
      checkedKeys: [],
      roleForm: { ...originForm },
      treeData: [],
      treeNodeKey: "id",
      isLoading: false,
      treeDetailList: [],
      isAlertTitle: true,
      type: "add"
    };
  },
  components: {
    permissionTree,
    SecondaryTitle
  },
  mounted() {
  },
  computed: {
    ...mapGetters("account", ["enterpriseId"]),
    isDetail() {
      return this.type === "view";
    },
    isEdit() {
      return this.type === "edit";
    },
    id() {
      return this.$route.query.id;
    }
  },
  methods: {
    showDrawer(data, type) {
      this.type = type;
      this.visible = true;
      this.roleForm = { ...data };
      type === 'view' ? this.getTreeList() : this.getTreeList()
    },
    onClose() {
      // 清除数据并跳转
      this.clearRoleForm();
      this.visible = false;
      this.isAlertTitle = true;
    },
    // 全部权限tree
    async getTreeList() {
      this.isLoading = true;
      let params = {
        departmentId: this.roleForm.departmentId,
        roleId: this.roleForm.id
      };
      let {
        data: { data, code }
      } = await getRoleTree(params);
      if (code === 200) {
        this.isLoading = false;
        this.treeData = data.resources || [];
      }
      this.isLoading = false;
    },
    // 详情角色信息tree
    async getDetailTreeList() {
      if (this.type === "add") return;
      this.isLoading = true;
      let params = {
        departmentId: this.roleForm.departmentId,
        roleId: this.roleForm.id
      };
      let {
        data: { data, code }
      } = await getDetailTreeList(params);
      if (code === 200) {
        this.treeData = data.resources || [];
      }
      this.isLoading = false;
    },
    // 保存
    async onSave() {
      let checkedKeys = this.$refs.tree.onSave();
      console.log(checkedKeys, "选中的数据");
      console.log(this.roleForm, "roleForm");
      if (!this.checkValid()) return;
      if (!checkedKeys.length) {
        this.$message.error("身份权限设置未选择");
        return;
      }
      // 保存接口
      let params = {
        enterpriseId: this.enterpriseId,
        departmentId: this.roleForm.departmentId,
        roleId: this.roleForm.id,
        groupIds: checkedKeys
      };
      try {
        const {
          data: { message, code }
        } = await addRoleTreeInfo(params);
        if (code === 200) {
          this.$message.success("保存成功");
          this.visible = false;
          this.clearRoleForm();
          this.$emit("success");
        } else {
          this.$message.error(message || "保存失败");
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
    checkValid() {
      let bol = false;
      this.$refs.roleForm.validate((valid) => {
        bol = Boolean(valid);
      });
      return bol;
    },
    clearRoleForm() {
      this.roleForm = { ...originForm };
      this.$refs.tree.$refs.tree.setCheckedKeys([]);
      this.$refs.roleForm.clearValidate();
      // 清除tree滚动条，使得滚动条为置顶
      document.getElementById("qiankun-tree").scrollIntoView();
    }
  }
};
</script>
<style lang="less" scoped>、

.form-row {
  margin: 8px 0;
}

.title-item {
  font-size: 14px;
  font-weight: 600;
}

// 身份权限设置警告
.qiankun-alertTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto;
  color: red;
  border: 1px solid red;
  padding: 4px 10px;
  font-size: 14px;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.qiankun-permission-tree {
  margin-bottom: 10px!important;
  max-height: 49vh;
  overflow-y: auto;
  ::v-deep .ant-drawer-title {
    font-weight: 600;
    font-size: 18px;
  }
}
</style>
